<template>
	<div>
		<el-tabs v-model="activeName" @tab-click="handleClick">
			<el-tab-pane label="全局系统配置" name="first">
				<el-table
					v-loading="tableDataLoading"
					:data="tableData">
					<el-table-column
					  fixed
						prop="type"
					  label="编号"
					  align="center"
					  width="80">
					</el-table-column>
					<el-table-column
					  prop="min"
					  label="类型">
					</el-table-column>
					<el-table-column
					  prop="value"
					  label="内容"
					  width="500">
					</el-table-column>
					<el-table-column
						prop="createAt"
						label="创建时间">
					</el-table-column>
					<el-table-column
						label="操作"
						prop="id"
						width="120">
						<template slot-scope="scope">
							<el-button
							  size="mini"
							  type="primary"
							  :disabled="!isAuth('allocationList:update')"
							  @click="amend(scope.$index, scope.row)">编辑
							</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-tab-pane>
			<el-tab-pane label="会员配置" name="huiyuan">
				<el-table
					v-loading="tableDataLoading"
					:data="tableData">
					<el-table-column
					  fixed
						prop="type"
					  label="编号"
					  align="center"
					  width="80">
					</el-table-column>
					<el-table-column
					  prop="min"
					  label="类型">
					</el-table-column>
					<el-table-column
					  prop="value"
					  label="内容"
					  width="500">
					</el-table-column>
					<el-table-column
						prop="createAt"
						label="更新时间">
					</el-table-column>
					<el-table-column
						label="操作"
						prop="id"
						 width="120">
						<template slot-scope="scope">
							<el-button
							  size="mini"
							  type="primary"
							  :disabled="!isAuth('allocationList:update')"
							  @click="amend(scope.$index, scope.row)">编辑
							</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-tab-pane>
			<el-tab-pane label="微信配置" name="sixth">
				<el-table
					v-loading="tableDataLoading"
					:data="tableData">
					<el-table-column
					  fixed
						prop="type"
					  label="编号"
					  align="center"
					  width="80">
					</el-table-column>
					<el-table-column
					  prop="min"
					  label="类型">
					</el-table-column>
					<el-table-column
					  prop="value"
					  label="内容"
					  width="500">
					</el-table-column>
					<el-table-column
						prop="createAt"
						label="更新时间">
					</el-table-column>
					<el-table-column
						label="操作"
						prop="id"
						 width="120">
						<template slot-scope="scope">
							<el-button
							  size="mini"
							  type="primary"
							  :disabled="!isAuth('allocationList:update')"
							  @click="amend(scope.$index, scope.row)">编辑
							</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-tab-pane>
			<el-tab-pane label="公众号模板配置" name="sixths">
			  <el-table
			    v-loading="tableDataLoading"
			    :data="tableData">
			    <el-table-column
			      fixed
			      prop="type"
			      label="编号"
			      align="center"
			      width="80">
			    </el-table-column>
			    <el-table-column
			      prop="min"
			      label="类型">
			    </el-table-column>
			    <el-table-column
			      prop="value"
			      label="内容"
			      width="500">
			    </el-table-column>
			    <el-table-column
			      prop="createAt"
			      label="更新时间">
			    </el-table-column>
			    <el-table-column
			      label="操作"
			      prop="id"
			      width="120">
			      <template slot-scope="scope">
			        <el-button
			          size="mini"
			          type="primary"
			          :disabled="!isAuth('allocationList:update')"
			          @click="amend(scope.$index, scope.row)">编辑
			        </el-button>
			      </template>
			    </el-table-column>
			  </el-table>
			</el-tab-pane>
			<el-tab-pane label="支付宝配置" name="seventh">
				<el-table
					v-loading="tableDataLoading"
					:data="tableData">
					<el-table-column
					  fixed
						prop="type"
					  label="编号"
					  align="center"
					  width="80">
					</el-table-column>
					<el-table-column
					  prop="min"
					  label="类型">
					</el-table-column>
					<el-table-column
					  prop="value"
					  label="内容"
					  width="500">
					</el-table-column>
					<el-table-column
						prop="createAt"
						label="更新时间">
					</el-table-column>
					<el-table-column
						label="操作"
						prop="id"
						 width="120">
						<template slot-scope="scope">
							<el-button
							  size="mini"
							  type="primary"
							  :disabled="!isAuth('allocationList:update')"
							  @click="amend(scope.$index, scope.row)">编辑
							</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-tab-pane>
			<el-tab-pane label="短信配置" name="eighth">
				<el-table
					v-loading="tableDataLoading"
					:data="tableData">
					<el-table-column
					  fixed
						prop="type"
					  label="编号"
					  align="center"
					  width="80">
					</el-table-column>
					<el-table-column
					  prop="min"
					  label="类型">
					</el-table-column>
					<el-table-column
					  prop="value"
					  label="内容"
					  width="500">
					</el-table-column>
					<el-table-column
						prop="createAt"
						label="更新时间">
					</el-table-column>
					<el-table-column
						label="操作"
						prop="id"
						 width="120">
						<template slot-scope="scope">
							<el-button
							  size="mini"
							  type="primary"
							  :disabled="!isAuth('allocationList:update')"
							  @click="amend(scope.$index, scope.row)">编辑
							</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-tab-pane>
			<el-tab-pane label="APP消息推送配置" name="tenth">
			  <el-table
			    v-loading="tableDataLoading"
			    :data="tableData">
			    <el-table-column
			      fixed
			      prop="type"
			      label="编号"
			      align="center"
			      width="80">
			    </el-table-column>
			    <el-table-column
			      prop="min"
			      label="类型">
			    </el-table-column>
			    <el-table-column
			      prop="value"
			      label="内容"
			      width="500">
			    </el-table-column>
			    <el-table-column
			      prop="createAt"
			      label="更新时间">
			    </el-table-column>
			    <el-table-column
			      label="操作"
			      prop="id"
			      width="120">
			      <template slot-scope="scope">
			        <el-button
			          size="mini"
			          type="primary"
			          :disabled="!isAuth('allocationList:update')"
			          @click="amend(scope.$index, scope.row)">编辑
			        </el-button>
			      </template>
			    </el-table-column>
			  </el-table>
			</el-tab-pane>
			<el-tab-pane label="文件上传配置" name="tenths">
			  <el-table
			    v-loading="tableDataLoading"
			    :data="tableData">
			    <el-table-column
			      fixed
			      prop="type"
			      label="编号"
			      align="center"
			      width="80">
			    </el-table-column>
			    <el-table-column
			      prop="min"
			      label="类型">
			    </el-table-column>
			    <el-table-column
			      prop="value"
			      label="内容"
			      width="500">
			    </el-table-column>
			    <el-table-column
			      prop="createAt"
			      label="更新时间">
			    </el-table-column>
			    <el-table-column
			      label="操作"
			      prop="id"
			      width="120">
			      <template slot-scope="scope">
			        <el-button
			          size="mini"
			          type="primary"
			          :disabled="!isAuth('allocationList:update')"
			          @click="amend(scope.$index, scope.row)">编辑
			        </el-button>
			      </template>
			    </el-table-column>
			  </el-table>
			</el-tab-pane>
      <el-tab-pane label="匹配设置" name="eleventh">
        <el-table
          v-loading="tableDataLoading"
          :data="tableData">
          <el-table-column
            fixed
            prop="type"
            label="编号"
            align="center"
            width="80">
          </el-table-column>
          <el-table-column
            prop="min"
            label="类型">
          </el-table-column>
          <el-table-column
            prop="value"
            label="内容"
            width="500">
          </el-table-column>
          <el-table-column
            prop="createAt"
            label="更新时间">
          </el-table-column>
          <el-table-column
            label="操作"
            prop="id"
            width="120">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                :disabled="!isAuth('allocationList:update')"
                @click="amend(scope.$index, scope.row)">编辑
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
		</el-tabs>
		<!-- 修改弹框 -->
		<el-dialog title="修改" :visible.sync="dialogFormVisible" center>
			<el-form :model="form">
			  <el-form-item label="配置类型：" :label-width="formLabelWidth" >
				<el-input v-model="form.min" style="width:65%;" readonly ></el-input>
			  </el-form-item>
			  <el-form-item label="内容：" :label-width="formLabelWidth" >
				<el-input v-model="form.value" type="textarea" :rows="4"  style="width:65%;"></el-input>
			  </el-form-item>
			</el-form>
		  <div slot="footer" class="dialog-footer">
			<el-button @click="dialogFormVisible = false">取 消</el-button>
			<el-button type="primary" @click="amendNoticeTo()">确 定</el-button>
		  </div>
		</el-dialog>
  </div>
</template>

<script>

    export default {
        data() {
          return {
            size:10,
            page:0,
            min:'',
            value:'',
            id:'',
            deployname:'xitong',
            activeName: 'first',
            dialogFormVisible: false,
            tableDataLoading: true,
            formLabelWidth:'200px',
            form:{
              id:'',
              min:'',
              value:'',
              type:'',
            },
            tableData: [],
            checkBoxData: []   //多选框选择的值
          }
        },
        methods: {
          handleSizeChange(val) {
              this.size = val;
              this.dataSelect();
          },
          handleCurrentChange(val) {
              this.page = val-1;
              this.dataSelect();
          },
          handleClick(tab, event) {
            if(tab._props.label=='全局系统配置'){
              this.deployname = 'xitong'
              this.dataSelect()
            }
            if(tab._props.label=='会员配置'){
              this.deployname = 'huiyuan'
              this.dataSelect()
            }
			if(tab._props.label=='微信配置'){
				this.deployname = 'weixin'
				this.dataSelect()
			}
			if(tab._props.label=='公众号模板配置'){
			  this.deployname = 'xiaoxi'
			  this.dataSelect()
			}
			if(tab._props.label=='支付宝配置'){
				this.deployname = 'zhifubao'
				this.dataSelect()
			}
			if(tab._props.label=='短信配置'){
				this.deployname = 'duanxin'
				this.dataSelect()
			}
			if(tab._props.label=='APP消息推送配置'){
			  this.deployname = 'push'
			  this.dataSelect()
			}
			if(tab._props.label=='文件上传配置'){
			  this.deployname = 'oss'
			  this.dataSelect()
			}
			if(tab._props.label=='匹配设置'){
			  this.deployname = 'pipei'
			  this.dataSelect()
			}
          },
          // 重置
          cleans(){
            this.min = '';
            this.dataSelect()
          },
          // 修改弹框
          amend(index,rows){
            this.dialogFormVisible=true;
            this.form.id = rows.id;
            this.form.type = rows.type
            this.form.min = rows.min;
            this.form.value=rows.value;
          },
          // 修改商品类别
          amendNoticeTo(){
            this.$http({
              url: this.$http.adornUrl2('/common/save'),
              method: 'post',
              data: this.$http.adornData({
              'id':this.form.id,
                'type': this.form.type,
              'value': this.form.value,
              })
            }).then(({data}) => {
              if (data && data.status === 0) {
              this.dialogFormVisible = false
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.dataSelect()
                  }
                })
              } else {
                this.$message.error(data.msg)
              }
            })
          },
          // 获取数据列表
          dataSelect () {
            this.tableDataLoading = true
            this.$http({
              url: this.$http.adornUrl2(`/common/type/condition/${this.deployname}`),
              method: 'get',
              params: this.$http.adornParams({
              'page':this.page,
              'size':this.size
              })
            }).then(({data}) => {
              if (data && data.status === 0) {
              this.tableDataLoading = false
                let returnData = data.data;
                this.tableData = returnData
              }
            })
          },
        },
        mounted() {
          this.dataSelect()
        }
    }
</script>

<style scoped="scoped">
  .eit{
	  height: 120px;
  }
</style>
